<template>
  <div class="search-page">
    <form action="/">
      <van-search
        v-model.trim="keywords"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
        @focus="isShowResult = false"
      />
    </form>

    <!-- 如果 没有搜索内容，那么显示历史记录 -->
    <SearchHistory v-if="keywords === ''" :list="searchHistoryList" @search="onSearch" />
    <!-- 如果有搜索内容，那么还要看是否敲了回车，如果没敲，显示联想建议 -->
    <SearchSuggestion v-else-if="!isShowResult" :list="searchSuggestionList" @search="onSearch" />
    <!-- 如果敲了回车，显示搜索结果 -->
    <SearchResult v-else :keywords="keywords" />

  </div>
</template>

<script>
import { setItem, KEY_SEARCH_HISTORY_LIST, getItem } from '../../utils/storage'
import SearchHistory from './components/search-history'
import SearchSuggestion from './components/search-suggestion'
import SearchResult from './components/search-result'
import { debounce } from 'lodash'
export default {
  name: 'SearchPage',
  components: {
    SearchHistory,
    SearchSuggestion,
    SearchResult
  },
  data () {
    return {
      isShowResult: false,
      searchSuggestionList: [], // 联想建议列表
      searchHistoryList: getItem(KEY_SEARCH_HISTORY_LIST) || [], // 搜索历史记录列表
      keywords: ''
    }
  },
  watch: {
    searchHistoryList () {
      // console.log('hehe')
      setItem(KEY_SEARCH_HISTORY_LIST, this.searchHistoryList)
    },
    // 只要 this.keywords 发生变化，就会触发该侦听器函数
    // 短时间内我们不需要这么频繁，等他停下来后，再执行即可
    // keywords () {
    //   console.log(this.keywords, 'keywords')
    //   // 如果 this.keywords 内容为空字符串，那么不需要发请求，直接清空联想建议列表
    //   // if (this.keywords === '') {
    //   //   this.searchSuggestionList = []
    //   // } else {
    //   //   // 发请求，获取联想建议数据
    //   //   this.apis.search.getSuggestion(this.keywords).then(res => {
    //     //     this.searchSuggestionList = res.data.data.options
    //   //   })
    //   // }
    // }
    // 普通写法
    keywords: debounce(function () {
      // 如果 this.keywords 内容为空字符串，那么不需要发请求，直接清空联想建议列表
      if (this.keywords === '') {
        this.searchSuggestionList = []
      } else {
        // 发请求，获取联想建议数据
        this.apis.search.getSuggestion(this.keywords).then(res => {
          this.searchSuggestionList = res.data.data.options
            .filter(v => !!v)
            .map(v => ({
              // 原始文本
              originText: v,
              // 高亮的文本
              highlightText: v.replace(new RegExp(`(${this.keywords})`, 'gi'), '<span style="color:red;">$1</span>')
            }))
        })
      }
    }, 150)
  },
  methods: {
    onSearch (keywords) {
      this.keywords = keywords // 重新赋值，保证从历史记录或者联想建议过来的时候，能同步到 this.keywords 数据上
      if (keywords === '') return
      const index = this.searchHistoryList.indexOf(keywords)
      if (index !== -1) { // 存在，先移出来，然后再加入到最前面
        this.searchHistoryList.unshift(...this.searchHistoryList.splice(index, 1))
      } else { // 不存在，就直接加入到最前面
        this.searchHistoryList.unshift(keywords)
      }
      this.searchHistoryList.splice(10) // 修剪长度，保证历史记录最多 10 条
      this.isShowResult = true
      // setItem(KEY_SEARCH_HISTORY_LIST, this.searchHistoryList)
    },
    onCancel () {
      // this.isShowResult = false
      // this.$toast('取消')
      this.$router.push({ name: 'home' })
    }
  }
}
</script>

<style>

</style>
